<template>
  <div>
    <el-row
      :gutter="20"
      v-for="item in data"
      :key="item.id"
      type="flex"
      :justify="item.children.length<4?'center':''"
    >
      <el-col :span="6" v-for="sItem in item.children" :key="sItem.id">
        <div class="choseSystemItem" :class="{active:sItem.active}" @click="handleClick(sItem)">
          <!-- <Icon :type="sItem.icon || 'icon-dashuju'"></Icon> -->
          <img :src="getImageUrl(sItem.icon)" />
          <span class="choseSystemItem-name">{{sItem.name}}</span>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "choseSystemItem",
  props: {
    listData: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      data: this.listData
    };
  },
  created () {
    this.changeListData();
  },
  methods: {
    getImageUrl (url) {
      return require(`../images/${url}.png`);
    },
    setMenberData (data) {
      this.data = data;
    },
    dfs (data, key, value) {
      for (let i = 0; i < data.length; i++) {
        let current = data[i];
        if (current.children && current.children.length > 0) {
          current.children.forEach(v => {
            this.$set(v, key, value);
          });
        }
      }
    },
    changeListData () {
      if (this.data.length > 0) {
        this.data = this.data.map(v => {
          if (!v.id) {
            this.$set(v, "id", Math.random());
            if (v.children && v.children.length > 0) {
              v.children.forEach(s => {
                if (!s.id) {
                  this.$set(s, "id", Math.random());
                }
                if (!s.active) {
                  this.$set(s, "active", false);
                }
              });
            }
          }
          return v;
        });
      }
      console.log(this.data);
    },
    // 点击每一项目
    handleClick (sItem) {
      // this.dfs(this.data, "active", false);
      // this.$set(sItem, "active", true);
      this.$emit("click", sItem);
    }
  }
};
</script>

<style lang="less" scoped>
  .choseSystemItem{
    // width: 86px;
    height: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    background-color: #ffffff;
    box-shadow:0 0 5px #2a4177;
    cursor: pointer;
    border-radius:4px;
    // padding-top: 50%;
    .iconfont{
      font-size: 30px;
      // .color();
    }
    .choseSystemItem-name{
      // .color();
      color:#2a4177 !important;
      font-size: 20px;
      font-weight:bold;
    }
    &.active{
      // .bgColor();
      background-color: #2a4177 !important;
      .iconfont{
        color: #fff !important;
      }
      .choseSystemItem-name{
        color: #fff !important;
      }
    }
    &:hover{
      background-color: #2a4177 !important;
      .choseSystemItem-name{
        color: #fff !important;
      }
    }
  }
</style>

